<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fluenty Survey</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
          'Helvetica Neue', sans-serif;
        background-color: #ffffff;
        max-width: 600px;
        margin: 0 auto;
      }

      .container {
        padding: 20px;
      }

      .nav-progress-container {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        gap: 15px;
      }

      .back-button {
        width: 30px;
        height: 30px;
        border: none;
        background: none;
        cursor: pointer;
        color: #2b85e4;
        font-size: 20px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .back-button svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }

      .progress-bar {
        flex: 1;
        height: 6px;
        background-color: #e0e0e0;
        border-radius: 3px;
      }

      .progress {
        height: 100%;
        width: 50%;
        background-color: #2b85e4;
        border-radius: 3px;
      }

      .question-title {
        font-size: 32px;
        font-weight: bold;
        color: #0b4983;
        margin-bottom: 20px;
        line-height: 1.3;
        text-align: center;
      }

      .question-subtitle {
        font-size: 22px;
        color: #333;
        margin-bottom: 30px;
        text-align: center;
      }

      .options {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .option {
        padding: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        background-color: #fff;
        cursor: pointer;
        font-size: 18px;
        color: #333;
        text-align: left;
      }

      .option:active {
        background-color: #f5f5f5;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="nav-progress-container">
        <button class="back-button">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
          </svg>
        </button>
        <div class="progress-bar">
          <div class="progress"></div>
        </div>
      </div>

      <div class="question-title">I always form sentences incorrectly when speaking.</div>

      <div class="question-subtitle">Is the following statement true for you?</div>

      <div class="options">
        <button class="option">True</button>
        <button class="option">Partially true</button>
        <button class="option">That's not true for me</button>
      </div>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const options = document.querySelectorAll('.option')
        const backButton = document.querySelector('.back-button')

        // 检查本地存储中是否有之前选中的选项
        const selectedOptionText = localStorage.getItem('iAlwaysOption')
        if (selectedOptionText) {
          options.forEach(option => {
            if (option.textContent === selectedOptionText) {
              option.style.borderColor = '#2b85e4'
              option.style.backgroundColor = '#EBF5FF' // 设置选中卡片的背景颜色
            }
          })
        }

        options.forEach(option => {
          option.addEventListener('click', function () {
            // 移除所有选项的选中样式
            options.forEach(opt => {
              opt.style.borderColor = '#e0e0e0'
              opt.style.backgroundColor = 'transparent' // 移除背景颜色
            })

            // 获取页面标题和当前页面名称
            const pageTitle = document.querySelector('.question-title').textContent.trim()
            const pageName = window.location.pathname.split('/').pop().split('.')[0]
            const selectedValue = this.textContent.trim()

            // 创建数据对象
            const data = {
              title: pageTitle,
              value: selectedValue,
              statement: 'sentence_formation', // 该陈述的识别码
            }

            // 以JSON格式存储到localStorage
            localStorage.setItem(pageName, JSON.stringify(data))

            // 模拟延迟后跳转到iUnderstand.html
            // 设置当前点击选项的选中样式
            this.style.borderColor = '#2b85e4'
            this.style.backgroundColor = '#EBF5FF' // 设置选中卡片的背景颜色

            // 获取选中的选项文本
            const selectedOptionText = this.textContent

            // 保存选中的选项到本地存储
            localStorage.setItem('iAlwaysOption', selectedOptionText)

            // 模拟延迟后跳转到下一页
            setTimeout(() => {
              console.log('选择了:', selectedOptionText)
              window.location.href = 'iUnderstand.html'
            }, 300)
          })
        })

        backButton.addEventListener('click', function () {
          window.location.href = 'iGet.html'
        })
      })
    </script>
  </body>
</html>
